import React from 'react';
// import {
// 	Route,
// 	Link
// } from 'react-router-dom';
import './index.scss';
import { getBanner, addApply } from '@/api/user';
import { Carousel, Checkbox, Modal } from 'antd';
// import ajax from '@/api/public';

class Home extends React.Component{
	constructor (props) {
		super(props)
		this.carouselRef = null
		this.setCarouselRef = el => {
			this.carouselRef = el
		}
		this.state={
			imgCurrent: 0,
			sale: [
				{
					icon: 'miaozhun',
					title: '精准营销',
					text: [
						'精准锁定泛行业消费人群',
						'整合高性价比资源',
						'让您的企业营销省时、省力'
					]
				},
				{
					icon: 'pingpai',
					title: '品牌营销',
					text: [
						'提供实时行业，人群分析',
						'品牌客户全案整合',
						'精品资源助力品牌营销'
					]
				},
				{
					icon: 'dingzhi',
					title: '行业营销',
					text: [
						'金融、游戏、旅游行业定制',
						'合理开展企业精品活动',
						'为您的营销活动推波助澜'
					]
				}
			],
			locals: [
				{
					icon: 'team',
					title: '优质运营',
					text: [
						'核心运营团队',
						'均有四年以上运营经验',
						'能快速响应服务'
					]
				},
				{
					icon: 'fuwu',
					title: '服务保障',
					text: [
						'从公司成立至今',
						'无任何客户投诉和负面新闻',
						'服务保障值得信赖'
					]
				},
				{
					icon: 'yizhan',
					title: '一站采买',
					text: [
						'全媒体覆盖',
						'一站式采买',
						'全案整合'
					]
				},
				{
					icon: 'fenlei',
					title: '行业专项',
					text: [
						'按行业细分专项服务',
						'涵盖金融、电商、游戏等',
						'深钻行业趋势与数据'
					]
				}
			],
			forms: [
				{
					errorType: false,
					errorMessage: '',
					testError: '企业名称不符合要求'
				},
				{
					errorType: false,
					errorMessage: '',
					testError: '姓名不符合要求'
				},
				{
					errorType: false,
					errorMessage: '',
					testError: '手机号码格式不正确'
				},
				{
					errorType: false,
					errorMessage: '',
					testError: '邮箱格式不正确'
				}
			],
			isChecked: false,
			visible: false,
			imgList: [],
			form: {
				name: '',
				mobile: '',
				email: '',
				company_name: ''
			},
			modalContnet: '我们的广告顾问将在两个工作日内与您电话联系，请您保持电话畅通',
			errMessage: '系统错误',
			modalTitle: '预约成功',
			btnText: '我知道了',
			error: false
		}
	}
	handleOk () {
		this.setState({
			visible: false
		})
	}
	handleCancel () {
		this.setState({
			visible: false
		})
	}
	testFunc (value, index) {
		if (index === 0) {
			return value.length > 3 ? true : false
		}
		if (index === 1) {
			return value.length > 1 ? true : false
		}
		if (index === 2) {
			return value.length === 11 ? true : false
		}
		if (index === 3) {
			return value.indexOf('@') !== -1 ? true : false
		}
	}
	changeUser (e) {
		this.setState({
			isChecked: e.target.checked
		})
	}
	changeImg (current) {
		this.setState({
			imgCurrent: current
		})
	}
	iconChangeImg (current) {
		this.carouselRef.goTo(current, true)
	}
	submitContet () {
		addApply({
			...this.state.form,
			type: 1
		}).then(res => {
			if (res.code === 20000) {
				this.setState({
					modalTitle: '预约成功！',
					btnText: '我知道了',
					modalContnet: '我们的广告顾问将在两个工作日内与您电话联系，请您保持电话畅通'
				}, () => {
					this.setState({
						visible: true
					})
				})
			} else {
				this.setState({
					modalTitle: res.message,
					btnText: '取消',
					modalContnet: ''
				}, () => {
					this.setState({
						visible: true
					})
				})
			}
		})
	}
	subData (e) {
		let newData = this.state.form
		newData[e.target.name] = e.target.value
		this.setState({
			form: newData
		})
	}
	inputOnBlur (e, index) {
		if (e.target.value === '' && index !== 0) {
			let newForms = this.state.forms
			newForms[index] = { errorType: true, errorMessage: '必填内容不能为空'}
			this.setState({
				forms: newForms
			})
		} else {
			let newData = this.state.form
			newData[e.target.name] = e.target.value
			this.setState({
				form: newData
			})
			if (e.target.value !== '') {
				let newForms = this.state.forms
				if (this.testFunc(e.target.value, index)) {
					newForms[index] = { errorType: false, errorMessage: '', testError: newForms[index].testError }
					this.setState({
						forms: newForms
					})
				} else {
					newForms[index] = { errorType: true, errorMessage: newForms[index].testError, testError: newForms[index].testError}
					this.setState({
						forms: newForms
					})
				}
			}
		}
	}
	componentDidMount () {
		getBanner({
			type: 1
		}).then(res => {
			this.setState({
				imgList: res.data.list
			})
		})
	}
	render() {
		return(
			<div>
					<Carousel autoplay>
						{
							this.state.imgList.map((item, index) => {
								return (
									<div className='11' key={index}>
										<div className='banner' style={{backgroundImage: 'url(' + item.image + ')'}}></div>
									</div>
								)
							})
						}
					</Carousel>
				<div className='home-module home-contain ziyuan' style={{paddingBottom: '30px'}}>
					<div className='pull-left'>
						<img src={`${process.env.PUBLIC_URL}/images/mixin.png`} />
					</div>
					<div className="right-group pull-right">
						<div className="right-group--title text-center">
							全网络流量资源
						</div>
						<div className='text-center mt22'>QUANWANGLUOLIULIANGZIYUAN</div>
						<div className='mt22 lh24'>每天有超过十亿用户使用360、微博、爱奇艺等众多互联网产品，他们 搜索想要了解的知识，分享自己感兴趣的内容，浏览商业信息。 我们帮助您与这些受众建立联系，将优质商业信息推送给真正需要的人。</div>
						<div className='text-center'>
							<a className='sub-btn' href='#form'>立即咨询</a>
						</div>
					</div>
				</div>
				<div className='home-module banner-type'>
					<div className='home-contain'>
						<div className='my-title'>
							全类型广告形式
						</div>
						<div className='text-center mt22'>
							QUANLEIXINGGUANGGAOXINGSHI
						</div>
						<div className='text-center mt22'>搜索广告、图文广告、信息流广告、视频广告、互动广告等全类型广告形式全面覆盖互联网用户人群，给广告主提供最优选择。 </div>
						<div className='img-group'>
							<i className={`glyphicon glyphicon-search icon-1 ${this.state.imgCurrent === 0 ? 'i-active' : ''}`} onClick={this.iconChangeImg.bind(this, 0)}></i>
							<i className={`glyphicon glyphicon-tianchong icon-2 ${this.state.imgCurrent === 1 ? 'i-active' : ''}`} onClick={this.iconChangeImg.bind(this, 1)}></i>
							<i className={`glyphicon glyphicon-tuwen icon-3 ${this.state.imgCurrent === 2 ? 'i-active' : ''}`} onClick={this.iconChangeImg.bind(this, 2)}></i>
							<i className={`glyphicon glyphicon-shiping icon-4 ${this.state.imgCurrent === 3 ? 'i-active' : ''}`} onClick={this.iconChangeImg.bind(this, 3)}></i>
							<i className={`glyphicon glyphicon-hudong icon-5 ${this.state.imgCurrent === 4 ? 'i-active' : ''}`} onClick={this.iconChangeImg.bind(this, 4)}></i>
							<Carousel ref={this.setCarouselRef} afterChange={this.changeImg.bind(this)}>
								<img src={`${process.env.PUBLIC_URL}/images/索搜广告.png`} />
								<img src={`${process.env.PUBLIC_URL}/images/信息流广告.png`} />
								<img src={`${process.env.PUBLIC_URL}/images/图文广告.png`} />
								<img src={`${process.env.PUBLIC_URL}/images/视频广告.png`} />
								<img src={`${process.env.PUBLIC_URL}/images/互动广告.png`} />
							</Carousel>
						</div>
					</div>
				</div>
				<div className='home-module home-contain ziyuan' style={{paddingTop: '81px'}}>
					<div className="right-group pull-left" style={{marginTop: '111px'}}>
						<div className="right-group--title text-center">
							全场景流量布局
						</div>
						<div className='text-center mt22'>QUANCHANGJINGLIULIANGBUJU</div>
						<div className='mt22 lh24'>媒体流量涉及到社交、搜索、购物、浏览、资讯、工具、应用下载等场 景，全场景布局覆盖，拓展广告主全面营销范围，与用户建立良性的友好关系。</div>
					</div>
					<div className='left-group pull-right'>
						<img src={`${process.env.PUBLIC_URL}/images/单色.png`} />
					</div>
				</div>
				<div className='home-module sale'>
					<div className='home-contain'>
						<div className='my-title'>
							多种营销模式
						</div>
						<div className='content-list'>
							{
								this.state.sale.map((item, i) => {
									return (
										<div className='content-one' key={i}>
											<i className={`glyphicon glyphicon-${item.icon}`}></i>
											<div className='content-title'>{item.title}</div>
											<div className='content-line'>
												{
													item.text.map((text, index) => {
														return (
															<div className="ccontent-one--line" key={index}>{text}</div>
														)
													})
												}
											</div>
										</div>
									)
								})
							}
						</div>
					</div>
				</div>
				<div className='home-module fuwu home-contain'>
					<div className='my-title'>
						本地专业化服务
					</div>
					<div className='content-list'>
						{
							this.state.locals.map((item, i) => {
								return (
									<div className='content-one' key={i}>
										<i className={`glyphicon glyphicon-${item.icon}`}></i>
										<div className='content-title'>{item.title}</div>
										<div className='content-line'>
											{
												item.text.map((text, index) => {
													return (
														<div className="ccontent-one--line" key={index}>{text}</div>
													)
												})
											}
										</div>
									</div>
								)
							})
						}
					</div>
				</div>
				<div className="home-module sale">
					<div className="home-contain form-submit" id='form'>
						<div className='form-left pull-left'>
							<div className="form-title text-center">请广告顾问来电为您介绍</div>
							<div className='mt22'>通过以下方式联系我们的广告专家，了解更多服务及产品信息</div>
							<div style={{marginBottom: '40px'}} className={`input-group ${this.state.forms[0].errorType ? 'error' : ''}`} onBlur={(e) => this.inputOnBlur(e, 0)}>
								<input type="text" name='company-name' placeholder='企业名称 （必填）' disabled={this.state.isChecked ? "disabled" : ""}/>
								<i className='glyphicon glyphicon-qiye'></i>
								<div className='error-message'>{this.state.forms[0].errorMessage}</div>
								<Checkbox className='checkbox' onChange={this.changeUser.bind(this)}> 我是个人广告主</Checkbox>
							</div>
							<div className={`input-group ${this.state.forms[1].errorType ? 'error' : ''}`} onBlur={(e) => this.inputOnBlur(e, 1)}>
								<input type="text" name='name' placeholder='姓名 （必填）' />
								<i className='glyphicon glyphicon-user'></i>
								<div className='error-message'>{this.state.forms[1].errorMessage}</div>
							</div>
							<div className={`input-group ${this.state.forms[2].errorType ? 'error' : ''}`} onBlur={(e) => this.inputOnBlur(e, 2)}>
								<input type="text" name='mobile' placeholder='手机 （必填）' />
								<i className='glyphicon glyphicon-mobile'></i>
								<div className='error-message'>{this.state.forms[2].errorMessage}</div>
							</div>
							<div className={`input-group ${this.state.forms[3].errorType ? 'error' : ''}`} onBlur={(e) => this.inputOnBlur(e, 3)}>
								<input type="text" name='email' placeholder='邮箱' onBlur={(e) => this.subData(e)}/>
								<i className='glyphicon glyphicon-mail'></i>
									<div className='error-message'>{this.state.forms[3].errorMessage}</div>
							</div>
							<div className='text-center'>
								<div className='submit-btn' onClick={this.submitContet.bind(this)}>
									预约顾问咨询
								</div>
							</div>
						</div>
						<div className='form-right pull-right text-center'>
							<div className="form-title text-center">新客户咨询专线</div>
							<div className='mt22'>通过以下方式联系我们的广告专家，了解更多服务及产品信息</div>
							<i className='glyphicon glyphicon-tele'></i>
							<div className='phone-number'>400-166-7171</div>
							<div className='my-time'>我们的工作时间是周一至周五 9:00-18:00</div>
						</div>
					</div>
				</div>
				<Modal
					closable={false}
					width='610px'
					className={this.state.btnText === '我知道了' ? 'btn-success' : 'btn-error'}
          title={this.state.modalTitle}
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
					okText={this.state.btnText}
        >
          {this.state.modalContnet}
        </Modal>
			</div>
		)
	}
}
export default Home;
